<template>
	<view class="content">
		<text class="title1">项目详细信息</text>
		<view class="input-group">
			<view class="input-row border">
				<text class="title">项目名称</text>
				<m-input type="text" focus v-model="listData.proName" placeholder="项目名称"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">项目描述</text>
				<m-input type="text" focus v-model="listData.proContent" placeholder="项目描述"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">项目发起人</text>
				<m-input type="text" focus v-model="listData.userName" placeholder="项目发起人"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">项目成本</text>
				<m-input type="text" focus v-model="listData.proCost" placeholder="项目成本"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">项目资源</text>
				<m-input type="text" focus v-model="listData.proResource" placeholder="项目资源"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">起始日期</text>
				<m-input type="text" focus v-model="listData.proTime" placeholder="起始日期"></m-input>
			</view>
			<view class="uni-padding-wrap uni-common-mt" v-if="listData.proState === '未进行'">
				<button type="primary" @click="handleShow1()">修改项目信息</button>
			</view>
			<view class="uni-padding-wrap uni-common-mt" v-if="listData.proState === '进行中' && listData.stateGoing === 1">
				<button type="primary" @click="handleShow2()">开始项目</button>
			</view>
			<view class="uni-padding-wrap uni-common-mt" v-if="listData.proState === '进行中' && listData.stateGoing === 0">
				<button type="warn" @click="handleShow2()">暂停项目</button>
			</view>
			<view class="uni-padding-wrap uni-common-mt" v-if="listData.proState === '进行中'">
				<button type="primary" @click="handleShow3()">项目完成</button>
			</view>
		</view>
		<xy-dialog
			title="提示"
			content="你确定要修改吗？"
			:show="showDialog1"
			@cancelButton="clickCancel1()"
			@confirmButton="clickConfirm1()">
		</xy-dialog>
		
		<xy-dialog v-if="listData.stateGoing === 1"
			title="提示"
			content="是否开始项目？"
			:show="showDialog2"
			@cancelButton="clickCancel2()"
			@confirmButton="clickConfirm2()">
		</xy-dialog>
		<xy-dialog v-if="listData.stateGoing === 0"
			title="提示"
			content="是否暂停项目？"
			:show="showDialog2"
			@cancelButton="clickCancel2()"
			@confirmButton="clickConfirm2()">
		</xy-dialog>
		
		<xy-dialog
			title="提示"
			content="项目是否完成？"
			:show="showDialog3"
			@cancelButton="clickCancel3()"
			@confirmButton="clickConfirm3()">
		</xy-dialog>
	</view>
</template>

<script>
	import mInput from '@/components/m-input.vue'
	import MxDatePicker from '@/components/mx-datepicker/datepicker.vue'
	import service from '../../service.js';
	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'

	export default {  
		components: {
			mInput,
			MxDatePicker,
			xyDialog
		},
		data() {
			return {
				listData: {
					proName: '',
					proContent: '',
					userName: '',
					proCost: '',
					proResource: '',
					proTime: '',
					proState: '',
					proId: '',
					stateGoing: ''
				},
				showDialog1: false,
				showDialog2: false,
				showDialog3: false
			}
		},
		computed: mapState(['userName', 'userId']),

		onLoad(event) {
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.listData = JSON.parse(decodeURIComponent(event.detailDate));
				console.log(this.listData);
			} catch (error) {
				this.listData = JSON.parse(event.detailDate);
			}
			console.log(this.userId);
		},
		onShareAppMessage() {
			return {
				path: '/pages/user/detail_project?detailDate=' + JSON.stringify(this.listData)
			}
		},
		methods: {
			clickCancel1() {
				this.showDialog1 = false;
			},
			clickConfirm1() {
				uni.request({
					url: 'http://115.159.219.165:8080/project/updateApplyProject',
					method: 'POST',
					data: {
						proName: this.listData.proName,
						proContent: this.listData.proContent,
						proCost: this.listData.proCost,
						proResource: this.listData.proResource,
						proId: this.listData.proId
					},
					success: function(data){
						console.log(data.data);
						uni.switchTab({
							url: 'user',
						});
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000
						});
						
					}.bind(this),
					fail:function(data, code){
						console.log('fail' + JSON.stringify(data));
					}
				});
				this.showDialog1 = false;
			},
			handleShow1() {
				this.showDialog1 = true;
			},
			//---------------------------------
			clickCancel2() {
				this.showDialog2 = false;
			},
			clickConfirm2() {
				if (this.listData.stateGoing == 0){
					this.listData.stateGoing = 1;
				}else{
					this.listData.stateGoing = 0;
				}
				uni.request({
					url: 'http://115.159.219.165:8080/project/updateStateGoing',
					method: 'POST',
					data: {
						stateGoing: this.listData.stateGoing,
						proId: this.listData.proId
					},
					success: function(data){
						console.log(data.data);
						uni.switchTab({
							url: 'user',
						});
						if (this.listData.stateGoing == 0){
							uni.showToast({
								title: '项目开始成功',
								icon: 'success',
								duration: 2000
							});
						}else{
							uni.showToast({
								title: '项目暂停成功',
								icon: 'success',
								duration: 2000
							});
						}
						
					}.bind(this),
					fail:function(data, code){
						console.log('fail' + JSON.stringify(data));
					}
				});
				this.showDialog2 = false;
				
			},
			handleShow2() {
				this.showDialog2 = true;
			},
			//-------------------------------
			clickCancel3() {
				this.showDialog3 = false;
			},
			clickConfirm3() {
				uni.request({
					url: 'http://115.159.219.165:8080/project/updateProjectState',
					method: 'POST',
					data: {
						proState: '已完成',
						proId: this.listData.proId
					},
					success: function(data){
						console.log(data.data);
					}.bind(this),
					fail:function(data, code){
						console.log('fail' + JSON.stringify(data));
					}
				});
				this.showDialog3 = false;
				uni.showToast({
					title: '项目完成',
					icon: 'success',
					duration: 2000
				});
			},
			handleShow3() {
				this.showDialog3 = true;
			},
		}
	}
</script>

<style>
	.title1 {
		font-size: 26px;
		color: $light_gray;

		text-align: center;
		font-weight: bold;
	}

	.uni-form-item {
		padding: 20upx 0;
		align-items: center;
	}

	.input-row .title {
		width: 30%;
		height: 30px;
		padding: 10px 0;
		padding-left: 30px;
		line-height: 30px;
	}
	
	.checkboxed {
		height: 30px;
		padding: 10px 0;
		padding-left: 7px;
		line-height: 30px;
	}

	.test {
		text-align: center;
		padding: 10px 0;
	}

	button {
		margin: 20upx;
		font-size: 28upx;
	}
	
</style>
